<template>
  <div>
    <div class="top">
      <div class="top_wap">
        <div class="logo">
          <a href="/">
            <img src="../assets/20913194121.png" alt="" />
          </a>
        </div>
        <div class="bz">
          <div class="p_1">
            <span>01 填写信息并核对</span>
          </div>
          <div class="p_2">
            <span>02 在线支付</span>
          </div>
          <div class="p_3">
            <span>03 提交成功</span>
          </div>
        </div>
      </div>
    </div>
    <div class="wap">
      <form class="res">
        <div class="wap_1">
          <!-- <form id="order_form" class="reserve"></form> -->
          <div class="wap_left">
            <h3>
              八大安心承诺 一价全含
              俄罗斯金银环6晚8日>疫情原因本产品暂无出团计划，如您对本产品感兴趣请联系在线咨询客服
              为您提供服务
            </h3>
            <div class="wap_left2">
              <p>
                <i class="iconfont icon-yuandian"> </i>
                <span>行程名称</span>
                【八大安心承诺】一价全含国航尊品皇冠假日·俄罗斯金银环6晚8日
                【商品编号：TS2200026074】
              </p>
              <p>
                <i class="iconfont icon-yuandian"> </i>
                <span>出发城市</span>
                北京
              </p>
              <p>
                <i class="iconfont icon-yuandian"> </i>
                <span>出发日期</span>
                2023-06-01
              </p>
              <p>
                <i class="iconfont icon-yuandian"> </i>
                <span>行程人数</span>
                1成人
              </p>
            </div>
          </div>
        </div>
        <div class="wap_2">
          <h1>
            联系人信息
            <span>
              <i iconfont icon-fangkuang1> </i>
              使用默认联系人
            </span>
          </h1>
          <div class="wap_2inp">
            <b class="wap_2b">
              <span>*</span>
              姓名
            </b>
            <input type="text" placeholder="请输入姓名" />
          </div>
          <div class="wap_2inp">
            <b class="wap_2b" style="letter-spacing: 11px">
              <span>*</span>
              手机号码
            </b>
            <input type="text" placeholder="请输入手机号" />
          </div>
          <div class="wap_2inp">
            <b class="wap_2b">
              <span>*</span>
              邮箱
            </b>
            <input type="text" placeholder="请输入邮箱" />
          </div>
          <div class="wap_2inp">
            <b class="wap_2b">
              <span>*</span>
              备注
            </b>
            <textarea
              class="meg-person"
              placeholder="请备注您对产品的其他要求"
              maxlength="200"
              cols="30"
              rows="10"
            />
          </div>
        </div>
        <div class="wap_3">
          <h1>
            出游人信息
            <span>
              为了更好的帮您完成行程预订，建议您可以填写出游人或稍后在“我的悠哉-我的订单”中补充出游人信息
            </span>
          </h1>
          <div class="wap_3inp">
            <div class="wap_3inp2">
              <h2>
                <b>
                  <span class="span1">出游人1</span>
                  <span class="span2">成人</span>
                </b>
                <em>
                  <i class="iconfont icon-lajitong"> 清空 </i>
                </em>
                <span>
                  <i class="iconfont icon-fangkuang1"> </i>
                  存为常用联系人
                </span>
              </h2>
              <div class="wap_3inp3">
                <b>
                  <span>*</span>
                  姓名
                </b>
                <input type="text" placeholder="请输入姓名" />
              </div>
              <div class="wap_3inp3">
                <b style="letter-spacing: 11px">
                  <span>*</span>
                  手机号码
                </b>
                <input type="text" placeholder="请输入11位手机号码" />
              </div>
              <div class="wap_3inp4">
                <b>证件类型 </b>
                <select class="selection" name="selection" id="">
                  <option value="0">请选择</option>
                  <option value="1">护照</option>
                  <option value="2">港澳通行证</option>
                  <option value="3">台湾通行证</option>
                  <option value="4">台胞证</option>
                  <option value="5">回乡证</option>
                </select>
                <input placeholder="请输入证件号码" type="text" name="" id="" />
              </div>
              <div class="wap_3inp5">
                <b>
                  <span>*</span>
                  性别
                </b>
                <template>
                  <el-radio v-model="radio" label="1">男</el-radio>
                  <el-radio v-model="radio" label="2">女</el-radio>
                </template>
              </div>
            </div>
          </div>
        </div>
        <div class="wap_4">
          <h1>
            服务门店
            <span>
              请选择离您最近的服务门店提交旅客资料。如您附近无门店，请选择我们的客服中心。
            </span>
          </h1>
          <div class="wap_4nr">
            <div class="wap_4dz">
              <!-- <div id="container"></div> -->
              <p>北京呼叫中心</p>

              <svg
                t="1663158788759"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1330"
                width="20"
                height="20"
              >
                <path
                  d="M834.6 931.2H198.5c-13.2 0-23.9-10.8-23.9-23.9 0-13.2 10.8-23.9 23.9-23.9h636.1c13.2 0 23.9 10.8 23.9 23.9 0 13.1-10.8 23.9-23.9 23.9z"
                  fill="#444444"
                  p-id="1331"
                ></path>
                <path
                  d="M277.1 383.7c0-130.9 106.1-237 237-237s237 106.1 237 237-237 277.4-237 277.4-237-146.6-237-277.4z"
                  fill="#FEE632"
                  p-id="1332"
                ></path>
                <path
                  d="M516.5 845l-10.8-6.7c-3.6-2.3-90.2-56.1-178.1-134.7-52.1-46.6-93.7-92.3-123.7-135.6-38.8-56.1-58.4-109-58.4-157.4 0-50.1 9.8-98.7 29.2-144.4 18.7-44.2 45.4-83.9 79.5-117.9 34.1-34.1 73.7-60.8 117.9-79.5 45.8-19.4 94.3-29.2 144.4-29.2 50.1 0 98.7 9.8 144.4 29.2 44.2 18.7 83.9 45.4 117.9 79.5 34.1 34.1 60.8 73.7 79.5 117.9 19.4 45.8 29.2 94.3 29.2 144.4 0 48.4-19.6 101.4-58.4 157.4-30 43.4-71.6 89-123.7 135.6-88 78.7-174.5 132.5-178.1 134.7l-10.8 6.7z m0-764.5c-182 0-330.1 148.1-330.1 330.1 0 73.2 58.2 163.9 168.4 262.5 67.6 60.5 135.8 106.7 161.6 123.5 25.9-16.9 94.4-63.3 162-123.9 109.9-98.4 168-189.1 168-262.1 0.2-182.1-147.9-330.1-329.9-330.1z"
                  fill="#231815"
                  p-id="1333"
                ></path>
                <path
                  d="M516.5 271.9c48.1 0 87.3 39.2 87.3 87.3s-39.2 87.3-87.3 87.3-87.3-39.2-87.3-87.3 39.2-87.3 87.3-87.3m0-40.9c-70.8 0-128.2 57.4-128.2 128.2s57.4 128.2 128.2 128.2S644.7 430 644.7 359.2 587.3 231 516.5 231z"
                  fill="#231815"
                  p-id="1334"
                ></path>
              </svg>

              <div id="container" style="width: 100%; height: 400px"></div>

              <div>
                <b
                  >地址
                  <span>北京市朝阳区朝阳公园路8号（朝阳公园西二门）</span>
                </b>
                <b
                  >电话
                  <span>1010 9898</span>
                </b>
                <b
                  >服务时间
                  <span> 9:00-19:00 </span>
                </b>
              </div>
            </div>
          </div>
        </div>
        <div class="back">
          <a href="javascript:history.go(-1)">返回上一步</a>
        </div>
        <div class="sm">
          <div class="smnr">
            <template>
              <!-- `checked` 为 true 或 false -->
              <el-checkbox v-model="checked"></el-checkbox>
            </template>
            我已阅读并知悉以下旅游合同、费用包含、预定须知、温馨提示、自费项目等所有相关内容,同意签署下列旅游合同。
          </div>
          <div class="qfk" @click="fukuan">
            <router-link to="/"></router-link>去付款
          </div>
        </div>
        <div class="ht">
          <template>
            <el-tabs :tab-position="tabPosition" style="height: 200px">
              <el-tab-pane label="旅游合同"
                ><h1>团队出境旅游合同</h1></el-tab-pane
              >
              <el-tab-pane label="费用说明"
                >服务项目：
                机票：国际段往返机票，团队经济舱，团队机票不准退、不准换、不准更改；
                签证：俄罗斯免签名单； 住宿：俄罗斯当地四星及特色酒店双人间；
                用餐：早餐：酒店自助早餐；午晚餐：中式正餐、正式俄餐；
                巴士：境外旅游巴士及专业司机；
                门票：行程中所列入内景点门票。</el-tab-pane
              >
              <el-tab-pane label="服务标准"
                >服务标准说明： 1. 航班说明：
                行程中所列航班号及时间仅供参考，请以出团通知标注航班号及时间为准。
                2. 景点说明：
                行程中未标注“入内”的景点均为游览外观，入内参观景点均含门票。 3.
                行程说明：
                如遇客观因素景点关门，本社有权调整游览顺序；如确实无法安排，将根据实际情况进行调整；
                景点实际游览时间以行程中标注时间为准，承诺不少于标注时间；
                根据国际航班团队搭乘要求，团队通常须提前3-3.5小时到达机场办理登机手续，故国际段航班在当地下午15点前（含15点），晚间*前（含*）起飞的，行程均不含午餐或晚餐；</el-tab-pane
              >
              <el-tab-pane label="预定须知">
                1.
                行程中所列航班号及时间仅供参考，将根据实际情况做出合理的调整；
                2. 伊尔库茨克同北京无时差； 3.
                行程中所注明的城市间距离，参照境外地图，仅供参考，视当地交通状况进行调整；
                4. 请您在境外期间遵守当地的法律法规，以及注意自己的人身安全； 5.
                此参考行程和旅游费用，我公司将根据参团人数、航班、签证及目的地国临时变化保留调整的权利；
                6.
                依照旅游业现行作业规定，本公司有权依据*出团人数情况，调整房间分房情况；
                7.
                您在境外旅游时除了准备信用卡以外，请尽量准备一些现金，有些商店不能刷卡只接受现金；
                8.
                俄罗斯主要流通货币为卢布，其他货币在使用或在俄罗斯兑换时都会有汇率损失，建议您出国前兑换好一切购物所需卢布。（100人民币约等于985卢布，随时会有浮动）如果您携带信用卡，请在国内确认好已经激活才可以在境外使用。</el-tab-pane
              >
            </el-tabs>
          </template>
        </div>
      </form>
      <div class="wap_right">
        <h1><i class="iconfont icon-liebiao_o"></i> 费用明细</h1>
        <h2>
          <span class="title">旅游团费</span>
          <span class="price">￥600001</span>
        </h2>
        <p>
          <span>1成人 x ¥600001.0</span>
          <span class="fr">¥600001</span>
        </p>
        <div>
          总计
          <em>￥</em>
          <span>600001</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  mounted() {
    window._AMapSecurityConfig = {
      securityJsCode: "38d420e24f45e01c603bc3cd16915d18",
    };
    AMapLoader.load({
      key: "b152df71959e68dbcebc350f467f259c", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      // plugins: [],
      plugins: ["AMap.PlaceSearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then(AMap => {
        let map = new AMap.Map("container");
        let placeSearch = new AMap.PlaceSearch({
          // city 指定搜索所在城市，支持传入格式有：城市名、citycode和adcode
          city: "成都市",
        });
        placeSearch.search("电影院", function (status, result) {
          // 查询成功时，result即对应匹配的POI信息
          console.log(status, result);
        });
      })
      .catch(e => {
        console.log(e);
      });
    //查询周边电影院
  },
  data() {
    return {
      sizeForm: {},
      activeName: "second",
      tabPosition: "left",
      radio: "1",
      value1: "",
      value2: "",
      param: "1",
      checked: "",
      dialogVisible: false,
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
  },
};
</script>

<style lang="scss">
#container {
  border: 3px solid #f9bd10;
  margin-left: -20px;
}
* {
  margin: 0;
  padding: 0;
}
.top {
  height: 100px;
  background: #fff;
  position: relative;
  -webkit-box-shadow: 5px 5px 5px #eee;
  box-shadow: 5px 5px 5px #eee;
  > .top_wap {
    position: relative;
    height: 100%;
    width: 1140px;

    margin: 0 auto;
    overflow: hidden;
    > .logo {
      width: 250px;
      display: inline-block;
    }
    > .bz {
      height: 26px;
      position: absolute;
      top: 50%;
      margin-top: -13px;
      display: inline-block;
      background: url(//r.uzaicdn.com/content/store/images/order/top_bg.jpg)
        center center repeat-x;
      right: 0;
      font-size: 12px;

      > .p_1 {
        width: 210px;
        font-size: 12px;
        color: #9d9d9d;
        display: block;
        float: left;
        line-height: 24px;
        color: #f9bd10 !important;
        background: url(//r.uzaicdn.com/content/store/images/order/step2.png)
          center no-repeat;
        text-align: center;
      }
      > .p_2 {
        width: 210px;
        font-size: 12px;
        color: #9d9d9d;
        display: block;
        float: left;
        line-height: 24px;
        background: url(//r.uzaicdn.com/content/store/images/order/step2.png)
          center no-repeat;
        text-align: center;
      }
      > .p_3 {
        width: 210px;
        font-size: 12px;
        color: #9d9d9d;
        display: block;
        float: left;
        line-height: 24px;
        background: url(//r.uzaicdn.com/content/store/images/order/step2.png)
          center no-repeat;
        text-align: center;
      }
    }
  }
}
.wap {
  width: 1140px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;

  > .res {
    width: 830px;
    > .wap_1 {
      > .wap_left {
        background: #fff;
        border-radius: 3px;
        border-radius: 3px;
        padding: 26px;
        margin-top: 26px;
        > h3 {
          font-weight: 400;
          font-size: 18px;
          line-height: 24px;
          margin-bottom: 15px;
        }
        > .wap_left2 {
          > p {
            font-size: 14px;
            margin: 0 50px 10px -7px;
            display: inline-block;
            > i {
              color: #f9bd10;
              font-size: 22px !important;
              vertical-align: middle;
            }
            > span {
              color: #999;
            }
          }
        }
      }
    }
    > .wap_2 {
      overflow: visible;
      background: #fff;
      border-radius: 5px;
      margin: 15px 0;
      padding: 30px 0;
      > h1 {
        font-size: 16px;
        border-left: 3px solid#f9bd10;
        padding-left: 20px;
        overflow: hidden;
        > span {
          font-size: 12px;
          color: #999;
          padding-left: 20px;
          margin-right: 40px;
          float: right;
          display: inline-block;
        }
      }
      > .wap_2inp {
        margin: 30px auto auto 50px;
        font-size: 12px;
        > .wap_2b {
          display: inline-block;
          width: 95px;
          margin-right: 30px;
          color: #666;
          position: relative;
          letter-spacing: 33px;
          > span {
            color: #f9bd10;
            position: absolute;
            left: -7px;
          }
        }
        > input {
          background-color: #fff;
          color: #333;
          border-radius: 5px;
          border: 1px solid #eee;
          width: 240px;
          height: 30px;
          line-height: 30px;
          padding: 0 10px;
          vertical-align: middle;
          margin-left: -28px;
        }
      }
    }
    > .wap_3 {
      background: #fff;
      border-radius: 5px;
      margin: 15px 0;
      padding: 30px 0;
      > h1 {
        font-size: 16px;
        border-left: 3px solid #f9bd10;
        padding-left: 20px;
        overflow: hidden;
        > span {
          font-size: 12px;
          color: #999;
          padding-left: 20px;
          margin-right: 40px;
        }
      }
      > .wap_3inp {
        margin: 30px auto auto 50px;
        font-size: 12px;
        font-size: 12px;
        color: #999;
        padding-left: 20px;
        margin-right: 40px;
        > .wap_3inp2 {
          > h2 {
            padding-right: 40px;
            font-size: 14px;
            color: #666;
            margin-left: -3px;
            margin-bottom: 10px;
            margin-top: 25px;
            > b {
              > .span1 {
                display: inline-block;
                color: #fff;
                background: #f9bd10;
                border-radius: 4px 0 0 4px;
                font-size: 12px;
                line-height: 18px;
                height: 18px;
                padding: 1px 7px;
                border: 1px solid#f9bd10;
                cursor: pointer;
              }
              > .span2 {
                display: inline-block;
                color: #f9bd10;
                background: #fff;
                border-radius: 0 4px 4px 0;
                font-size: 12px;
                line-height: 18px;
                height: 18px;
                padding: 1px 7px;
                margin-left: -6px;
                border: 1px solid #f9bd10;
                cursor: pointer;
              }
            }
            > em {
              color: #3e91e5;
              margin-left: 20px;
              font-size: 12px;
              cursor: pointer;
              > i {
                font-family: "iconfont" !important;
                font-size: 12px;
              }
            }
            > span {
              float: right;
              font-size: 12px;
              > i {
                cursor: pointer;
              }
            }
          }
          > .wap_3inp3 {
            color: #666;
            margin-bottom: 14px;
            > b {
              display: inline-block;
              width: 95px;
              margin-right: 30px;
              color: #666;
              position: relative;
              letter-spacing: 33px;
              > span {
                color: #f9bd10;
                position: absolute;
                left: -7px;
              }
            }
            > input {
              background-color: #fff;
              color: #333;
              border-radius: 5px;
              border: 1px solid #eee;
              width: 240px;
              height: 30px;
              line-height: 30px;
              padding: 0 10px;
              vertical-align: middle;
              margin-left: -28px;
            }
          }
          > .wap_3inp4 {
            color: #666;
            margin-bottom: 14px;
            > b {
              display: inline-block;
              width: 95px;
              margin-right: 30px;
              color: #666;
              position: relative;
              letter-spacing: 3px;
            }
            > .selection {
              width: 104px;
              margin-left: -28px;
              border: 1px solid #eee;
              background-color: #fff;
              height: 30px;
              line-height: 30px;
              vertical-align: middle;
            }
            > input {
              margin-left: 0;
              width: 132px;
              background-color: #fff;
              color: #333;
              border-radius: 5px;
              border: 1px solid #eee;

              height: 30px;
              line-height: 30px;
              padding: 0 10px;
              vertical-align: middle;
            }
          }
          > .wap_3inp5 {
            color: #666;
            margin-bottom: 14px;
            > b {
              letter-spacing: 33px;
              display: inline-block;
              width: 95px;
              margin-right: 30px;
              color: #666;
              position: relative;
              > span {
                color: #f9bd10;
                position: absolute;
                left: -7px;
              }
            }
          }
        }
      }
    }
    > .wap_4 {
      background: #fff;
      border-radius: 5px;
      margin: 15px 0;
      padding: 30px 0;
      > h1 {
        font-size: 16px;
        border-left: 3px solid#f9bd10;
        padding-left: 20px;
        overflow: hidden;
        > span {
          font-size: 12px;
          color: #999;
          padding-left: 20px;
          margin-right: 40px;
        }
      }
      > .wap_4nr {
        margin: 30px auto auto 50px;
        font-size: 12px;
        > .wap_4dz {
          font-size: 14px;
          margin: 35px 0 10px;
          > div {
            font-size: 12px;
            color: #666;
            margin-top: 16px;
            margin-right: 10px;
            display: inline-block;
          }
        }
      }
    }
    > .back {
      display: inline-block;
      font-size: 12px;
      line-height: 34px;
      > a {
        color: #999;
        text-decoration: none;
      }
    }
    > .sm {
      background: #fff8fa;
      border: 1px solid #f9bd10;
      border-radius: 5px;
      position: relative;
      padding: 20px 15px;
      > .smnr {
        display: inline-block;
        font-size: 12px;
        line-height: 34px;
      }
      .qfk {
        background: #f9bd10(255, 0, 72);
        color: #f9bd10;
        font-size: 14px;
        padding: 10px 30px;
        border-radius: 5px;
        display: inline-block;
        float: right;
        cursor: pointer;
        > qfk.active {
          background: red;
        }
      }
    }
    > .ht {
      padding: 20px 30px;
      margin-bottom: 50px;
      background: #fff;
      border-radius: 5px;
      margin: 15px 0;
    }
  }
  > .wap_right {
    width: 250px;
    background: #fff url("../assets/x_x.jpg") center top no-repeat;
    margin-top: 26px;
    position: fixed;
    top: 100px;
    padding: 20px;
    margin-left: 850px;
    > h1 {
      font-size: 16px;
      margin-bottom: 20px;
    }
    > h2 {
      font-size: 14px;
      margin: 25px auto 8px;
      height: 20px;
      > .price {
        float: right;
        color: #f9bd10;
      }
    }
    p {
      color: #999;
      font-size: 12px;
      height: 25px;
      background: url("../assets/liner_order_line.jpg") repeat-x 0 -1px;
      > span {
        padding-right: 0;
        padding-left: 7px;
      }
      > .fr {
        float: right;
      }
    }
    div {
      font-size: 14px;
      text-align: right;
      margin-top: 20px;
      color: #999;
      > em {
        color: #f9bd10;
        font-size: 12px;
        margin: auto 0 auto 5px;
      }
      > span {
        font-size: 26px;
        color: #f9bd10;
      }
    }
  }
}
body {
  background: rgb(247, 247, 247);
}
.meg-person {
  height: 35px;
  display: inline-block;
  vertical-align: middle;
  margin-left: -30px;
  border: 1px solid #eee;
  width: 300px;
  padding: 10px;
  outline: 0;
  resize: none;
  outline: 0;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "WenQuanYi Micro Hei", sans-serif;
}
select {
  margin-right: 4px;
  color: #666;
  border: 0;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  padding-left: 10px;
  outline: 0;
  background: #fafafa url("../assets/select_sj.png") no-repeat 94% center;
  padding-right: 0\9;
}
</style>
